<template>
  <view class="app-activity" :class="{show:isScrollingUp,hide:!isScrollingUp}">
      <view class="head" @touchstart="touchStart" @touchmove="touchMove" >
          <view class="line"></view>
          <view class="title">{{isScrollingUp?`下拉收起列表`:`上拉查看所有活动列表`}}</view>
      </view>
      <view class="content">
        <view class="item" v-for="(item,index) in list" :key="index">
            <view class="bg">
              <image class="bgImg" :src="item.imagesList[0]" mode="aspectFill"></image>
              <view class="head">
                  <view class="title">{{item.title}}</view>
                  <view class="btns">
                      <view class="btn success">报名中</view>
                      <view class="btn info">{{item.tags}}</view>
                  </view>
              </view>
              <view class="text"> 
                  <view class="lf">
                    <img src="/static/map/icon3.png" alt="">
                    <span>{{item.startTime}}</span>
                  </view>
              </view>
              <view class="text"> 
                  <view class="lf">
                    <img src="/static/map/icon2.png" alt="">
                    <span>{{item.locationDescription}}</span>
                  </view>
                  <span class="km">5.1km</span>
              </view>
            </view>
            <view class="content">
                <view class="join">
                    <view class="lf">
                        <image :src="v.portrait" mode="aspectFill" v-for="(v,i) in item.teammateList" :key="i"></image>
                        <span>等{{ item.teammateList.length}}人想参加</span>
                    </view>
                    <view class="btn">我想参加</view>
                </view>
            </view>
        </view>
      </view>
  </view>
</template>
<script>
export default {
  props:{
    current:{
      type:Number,
      default:0
    },
    list:{
      type:Array,
      default:[]
    }
  },
  data() {  
    return {  
      startY: 0, // 手指按下时的Y坐标  
      endY: 0, // 手指移动时的Y坐标   
      isScrollingUp: false, // 手指是否向上滑动  
      touchStartTime: 0, // 手指按下的时间  
      longPressThreshold: 400, // 长按阈值（毫秒）  
      moveThreshold: 10, // 移动阈值（像素）  
    };  
  },  
  methods: {  
    touchStart(event) {  
      // 记录手指按下的Y坐标和时间  
      this.startY = event.touches[0].clientY;  
      this.touchStartTime = Date.now();  
    },  
    touchMove(event) {  
      // 如果超过长按阈值，则认为是长按  
      // if (Date.now() - this.touchStartTime > this.longPressThreshold) {  
          // 记录手指移动的Y坐标  
          this.endY = event.touches[0].clientY;  
      
          // 计算Y坐标差  
          const deltaY = this.endY - this.startY;  
      
          // 如果移动距离超过阈值，则判断滑动方向  
          if (Math.abs(deltaY) > this.moveThreshold) {  
            if (deltaY < 0) {  
              this.isScrollingUp = true; // 向上滑动  
            } else if (deltaY > 0) {  
              this.isScrollingUp = false; // 向下滑动  
            }  
          }  
      
          // 更新startY为当前endY，以便下一次touchmove事件计算  
          this.startY = this.endY;  
        // }  
    }
  },  
}
</script>
<style lang="scss" scoped>
  @keyframes showdh{
    0%{
      height: 0;
    }
    100%{
      height: 70vh;
    }
  }
  @keyframes outshowdh{
    0%{
      height: 70vh;
    }
    100%{
      height: 0;
      display: none;
    }
  }
  .hide{
    &>.content{
      animation: outshowdh 0.5s forwards;
    }
  }
  .show{
    &>.content{
     
      overflow: auto;
      animation: showdh 0.5s forwards;
    }
  }
  .app-activity{
    position: relative;
    z-index: 999999999;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    .head{
      height: 88rpx;
      text-align: center;
      .line{
        width: 80rpx;
        height: 10rpx;
        background: #909399;
        border-radius: 14rpx 14rpx 14rpx 14rpx;
        margin-bottom: 16rpx;
        display: inline-block;
        margin-top: 10rpx;
      }
      .title{
        color: #909399;
      }
    }
    .content{
      .item{
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        overflow: hidden;
        margin: 0 30rpx 40rpx 30rpx;
        .bg{
          padding: 30rpx 40rpx 18rpx 40rpx;
          background-color: rgba(0,0,0,0.4);
          position: relative;
          .bgImg{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
          }
          .head{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 22rpx;
            .title{
              font-weight: 500;
              font-size: 28rpx;
              color: #FFFFFF;
            }
            .btns{
              display: flex;
              .btn{
                width: 94rpx;
                height: 32rpx;
                line-height: 32rpx;
                border-radius: 8rpx 8rpx 8rpx 8rpx;
                border: 1rpx solid #101011;
                text-align: center;
                font-size: 22rpx;
              }
              .btn+.btn{
                margin-left: 10rpx;
              }
              .btn.success{
                background: linear-gradient( 270deg, #16D998 0%, #87F8FF 100%);
              }
              .btn.info{
                background: #101011;
                color: #17E5A1;
              }
            }
          }
          .text{
            font-family: Manrope, Manrope;
            font-weight: 400;
            font-size: 20rpx;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .lf{
              display: flex;
              align-items: center;
              width: 85%;
              img{
                width: 24rpx;
                height: 24rpx;
                margin-right: 10rpx;
              }
              span{
                flex:1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            
          }
          .text+.text{
            margin-top: 12rpx;
          }
        }
        .content{
          padding: 40rpx;
          background: #F5F6F7;
          .join{
            background: linear-gradient( 278deg, rgba(22,217,152,0.16) 0%, rgba(255,255,255,0) 100%);
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 100rpx;
            .lf{
              display: flex;
              align-items: center;
              span{
                margin-left: 12rpx;
                font-size: 24rpx;
                color: #606266;
              }
              image{
                width: 50rpx;
                height: 50rpx;
                background: #D8D8D8;
                border-radius: 50%;
                box-shadow: 0rpx 4rpx 96rpx 0rpx rgba(0,0,0,0.06);
              }
            }
            .btn{
              width: 160rpx;
              text-align: center;
              height: 52rpx;
              line-height: 52rpx;
              background: #16D998;
              border-radius: 50rpx 50rpx 50rpx 50rpx;
            }
          }
        }
      }
    }
  }
</style>